//下拉框
var x = ["成都市", "绵阳", '雅安', '乐山', '内江'];
var y = [
    ["成都一中", "成都二中"],
    ["绵阳一中", "绵阳二中"],
    ["雅安一中", "雅安二中"],
    ["乐山一中", "乐山二中"],
    ["内江一中", "内江二中"],
];
var chose1 = document.getElementById("chose1");
var chose2 = document.getElementById("chose2");
chose1.length = x.length;
for (var i = 0; i < x.length; i++) {
    chose1.options[i].text = x[i];
}

chose2.length = y[0].length;
chose2.options[0].text = y[0][0];

function change1() {
    var index = chose1.selectedIndex;
    //    console.log(index);
    // chose2.length = y[index].length;
    for (var j = 0; j < y[index].length; j++) {
        chose2.options[j].text = y[index][j];
    };
}


// 添加数据
// var schoolArr = [];
var totalPage;
var currentPage = 1;
var pageSize = 5;
//生成页码
bindPage();
selectAll();
addPageEvent();
addDelEvent();
displayCardList();


// addClassesArr()


//  删除数据
function addDelEvent() {
    $('#tbCard').on('click', '.del', function () {
        $(this).parent().parent().remove();
        let id = $(this).attr('date-id');
        delCardById(id);
        bindPage();
    })
}
function delCardById(id) {
    // var schoolArr = localStorage.setItem('schollArr',JSON.stringify(schoolArr));
    var schoolArr = localStorage.getItem("schoolArr");
    for (var i = 0; i < schoolArr.length; i++) {
        if (schoolArr[i] == id[i]) {
            schoolArr.splice(i, 1)
            localStorage.setItem('schollArr',JSON.stringify(schoolArr));
            break;
        }
    }
}
// 全选与取消全选

function selectAll() {
    $('input [type="checkbox"]').each(function () {
        console.log(this);
        if ($(this).prop('checked' == true)) {
            $('input [type="checkbox"]').prop('checked', true);
            return;
        } else {
            $('input [type="checkbox"]').prop('checked', false);
            return;
        }
    })
}
//分页
function bindPage() {
    var schoolArr = JSON.parse(localStorage.getItem('schoolArr'));
    
    var totalSize = schoolArr.length;
    totalPage = Math.ceil(totalSize / pageSize);
    if (totalPage < currentPage) {
        totalPage = totalPage;
    }
    $('#divPage').html('');
    for (var i = 1; i <= totalPage; i++) {
        $('#divPage').append(`<button id='Btn'>${i}</button>`);
    }
}

function addPageEvent() {
    $('#divPage').on('click', '#Btn', function () {
        currentPage = Number($(this).text());
        displayCardList();
    })
}




// 添加班级的模态框
$('#btn5').on('click', function () {
    $('.modai1').slideDown(500);
})
$('.close').on('click', function () {
    $('.modai1').slideUp(500);
})
// 修改班级的模态框
$('#btn6').on('click', function () {
    $('.modai2').slideDown(500);
})
$('.close').on('click', function () {
    $('.modai2').slideUp(500);
})
//点取消时，隐藏模态框
$('#btn2').on('click', function () {
    $('.modai1').hide();
})
$('#btn').on('click', function () {
    $('.modai2').hide();
})

// 添加班级
$('#btn3').click(function () {
    var a = $('#shuRu').val();
    // console.log(a);
    var b = $('#shuRu1').val();
    $('#tbCard').append(
        `
        <tr>
            <td>${a}</td>
            <td>${b}</td>
            <td><input type="checkbox" class="chk chk01"><span class='del'>删除</span></td>
        </tr>
    `);
    $('.modai1').hide();
});

//删除
// $('#tbCard').on('click','.del', function () {
//     // var schoolArr = localStorage.getItem("schoolArr");
//     // console.log(this);
//     $(this).parent().remove();

// })

//动态添加表格
function displayCardList() {
    var studentArr = JSON.parse(localStorage.getItem('studentArr'));
    // debugger
    $('#tbCard').html('');
    var start = (currentPage - 1) * pageSize;
    var end = start + pageSize;
    for (var i = start; i < studentArr.length && i < end; i++) {
        $('#tbCard').append(`<tr>
         <td>${studentArr[i].schoolId}</td>
         <td>${studentArr[i].classes}</td>
         <td><input type="checkbox" class="chk chk01"><span class="del" date-id='schoolArr[i].id'>删除</span></td>
     </tr>`)
    }
    
}

//全选 
$(document).on("click","#checkAll",function(){
    $(".chk01").prop("checked",$(this).prop("checked"))//多选框的状态与全选框状态保持一致
 })
                    

 
// //修改班级
$('#btn1').on('click', function () {
    var a = $('#shuRu2').val();
    var b = $('#shuRu3').val();
    // var newArr = [];
    for (var i = 0; i < studentArr.length; i++) {
        if (studentArr[i].schoolId == a && studentArr[i].classes == b) {
            $('#shuRu2').val('');
            $('#shuRu3').val('');
            alert('继续修改班级');
            $('#banji').html(`<tr>
            <td>${a}</td>
            <td>${b}</td>
            <td><input type="checkbox"><span class="del" date-id='schoolArr[i].id'>删除</span></td>
        </tr>`)
        } else {
            alert('你输入的班级不存在，不能修改');
            break;
        }
    }
})



// function SubmitForm() {
//     //获取form表单中的input值，判断是否为空；
//     var ret = true;
//     // var text = $('.modai1:text');
//     //遍历所有的input["type=text"]，只要有空值，就将ret设置为false；
//     $(':text').each(function () {
//         //$(this)=要循环的每一个元素
//         var value = $(this).val();
//         if (value.trim().length == 0) {
//             $(this).css('border-color', 'red');
//             alert("输入的值不能为空");
//             ret = false;
//         } else {
//             $(this).css('border-color', 'green');
//         }
//     });
//     return ret;
// }

